﻿<template>
  <div style="background-color: #ececec;">
    <a-card :bordered="false">
      <div class="table-operator">
        <a-button v-if="hasPerm('Base_ProjectInfo.Add')" type="primary" icon="plus" @click="handleAdd()">新建
        </a-button>
        <a-button
          v-if="hasPerm('Base_ProjectInfo.Delete')"
          type="primary"
          icon="minus"
          @click="handleDelete(selectedRowKeys)"
          :disabled="!hasSelected()"
          :loading="loading"
        >删除
        </a-button>
        <a-button type="primary" icon="redo" @click="getDataList()">刷新</a-button>
      </div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="10">
            <a-col :md="4" :sm="24">
              <a-form-item label="查询类别">
                <a-select allowClear v-model="queryParam.condition">
                  <a-select-option key="ProjectName">项目名称</a-select-option>
                  <a-select-option key="City">城市</a-select-option>
                  <a-select-option key="ProjectType">项目类型</a-select-option>
                  <!--<a-select-option key="Project_Photo_Url">项目图片（或照片、效果图）</a-select-option>-->
                  <!--<a-select-option key="Code">自定义编码</a-select-option>-->
                  <!--<a-select-option key="OnGround_H">地上高区层数</a-select-option>-->
                  <!--<a-select-option key="OnGround_M">地上中区层数</a-select-option>-->
                  <!--<a-select-option key="OnGround_L">地上低区层数</a-select-option>-->
                  <!--<a-select-option key="onGround_No">地上不分区层数</a-select-option>-->
                  <!--<a-select-option key="DwData_Url">电梯分布图地址集合</a-select-option>-->
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input v-model="queryParam.keyword" placeholder="关键字" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="() => {this.pagination.current = 1; this.getDataList()}">查询
              </a-button>
              <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table
        ref="table"
        :scroll="{y:530}"
        :columns="columns"
        :rowKey="row => row.Id"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :bordered="true"
        size="small">
        <span slot="CreateTime" slot-scope="CreateTime">{{ timeFormat(CreateTime) }}</span>
        <span slot="showStatus" slot-scope="text">
          <template>
            <a-tag v-if="text == '0'" color="red">未通过</a-tag>
            <a-tag v-else-if="text == '1'" color="green">已通过</a-tag>
          </template>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleDetail([record.Id])">详情</a>
            <a-divider v-if="hasPerm('Base_ProjectInfo.Edit')" type="vertical" />
            <a v-if="hasPerm('Base_ProjectInfo.Edit')" @click="handleEdit(record.Id)">编辑</a>
            <a-divider
              v-if="hasPerm('Base_ProjectInfo.Edit')&&hasPerm('Base_ProjectInfo.Delete')"
              type="vertical" />
            <a v-if="hasPerm('Base_ProjectInfo.Delete')" @click="handleDelete([record.Id])">删除</a>
            <a-divider
              v-if="hasPerm('Base_ProjectInfo.Delete')&&hasPerm('Base_ProjectInfo.Approval')"
              type="vertical" />
            <a v-if="hasPerm('Base_ProjectInfo.Approval')" @click="handleApproval([record.Id])">审核</a>
          </template>
        </span>
      </a-table>
      <edit-form ref="editForm" :parentObj="this"></edit-form>
      <detail-form ref="detailForm" :parentObj="this"></detail-form>
    </a-card>
  </div>

</template>

<script>
import EditForm from './EditForm'
import DetailForm from './DetailForm'
import moment from 'moment'

const columns = [
  // { title: '自定义编码', dataIndex: 'Code', width: '10%' },
  // { title: '排序', dataIndex: 'Sort', width: '5%' },
  { title: '项目编号', dataIndex: 'Id' },
  { title: '项目名称', dataIndex: 'ProjectName' },
  { title: '创建时间', dataIndex: 'CreateTime', width: '10%', scopedSlots: { customRender: 'CreateTime' } },
  { title: '城市', dataIndex: 'City' },
  // { title: '项目图片', dataIndex: 'Project_Photo_Url', width: '10%' },
  { title: '项目类型', dataIndex: 'ProjectType' },
  { title: '总建筑面积', dataIndex: 'TotalArea' },
  // { title: '标准层建筑面积', dataIndex: 'StandardArea' },
  { title: '建筑总高度', dataIndex: 'TotalHeight' },
  // { title: '标准层层高', dataIndex: 'StandardHeight' },
  // { title: '地上高区层数', dataIndex: 'OnGround_H', width: '10%' },
  // { title: '地上中区层数', dataIndex: 'OnGround_M', width: '10%' },
  // { title: '地上低区层数', dataIndex: 'OnGround_L', width: '10%' },
  // { title: '地上不分区层数', dataIndex: 'onGround_No', width: '10%' },
  // { title: '地上层数', dataIndex: 'OnGround_All', width: '10%' },
  // { title: '地下层数', dataIndex: 'UnderGround_All', width: '10%' },
  // { title: '避难层高区层高', dataIndex: 'Refuge_H', width: '10%' },
  // { title: '避难层中区层高', dataIndex: 'Refuge_M', width: '10%' },
  // { title: '避难层低区层高', dataIndex: 'Refuge_L', width: '10%' },
  // { title: '电梯分布图地址集合', dataIndex: 'DwData_Url', width: '10%' },
  {
    title: '审批状态',
    dataIndex: 'ApprovalStatus',
    width: '5%',
    key: 'showStatus',
    scopedSlots: { customRender: 'showStatus' }
  },
  { title: '操作', dataIndex: 'action', width: '15%', scopedSlots: { customRender: 'action' } }
]

export default {
  components: {
    EditForm,
    DetailForm
  },
  mounted () {
    this.getDataList()
  },
  data () {
    return {
      data: [],
      dataFormat: [],
      pagination: {
        current: 1,
        pageSize: 12,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: 'Id', order: 'desc' },
      loading: false,
      columns,
      queryParam: {},
      selectedRowKeys: []
    }
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.getDataList()
    },
    getDataList () {
      this.selectedRowKeys = []
      this.loading = true
      this.$http
        .post('/Base_Project/Base_ProjectInfo/GetDataList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order || 'desc',
          Search: this.queryParam,
          ...this.filters
        })
        .then(resJson => {
          this.loading = false
          this.data = resJson.Data
          if (this.data) {
            const pagination = { ...this.pagination }
            pagination.total = resJson.Total
            this.pagination = pagination
          }
        })
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },
    hasSelectedFormat () {
      return this.selectedRowKeysFormat.length > 0
    },
    handleAdd () {
      this.$refs.editForm.openDrawer()
    },
    handleAddFormat () {
    },
    handleDetail (id) {
      this.$refs.detailForm.openDrawer(id)
    },
    handleEdit (id) {
      this.$refs.editForm.openDrawer(id)
    },
    handleDelete (ids) {
      var thisObj = this
      this.$confirm({
        title: '确认删除吗?',
        onOk () {
          return new Promise((resolve, reject) => {
            thisObj.$http.post('/Base_Project/Base_ProjectInfo/DeleteDataMongoDBAndMySQL', ids).then(resJson => {
              resolve()

              if (resJson.Success) {
                thisObj.$message.success('操作成功!')

                thisObj.getDataList()
              } else {
                thisObj.$message.error(resJson.Msg)
              }
            })
          })
        }
      })
    },
    handleApproval (ids) {
      var thisObj = this
      this.$confirm({
        title: '确认审核吗?',
        onOk () {
          return new Promise((resolve, reject) => {
            thisObj.$http.post('/Base_Project/Base_ProjectInfo/ApprovalStatus', ids).then((resJson) => {
              resolve()

              if (resJson.Success) {
                thisObj.$message.success('操作成功!')

                thisObj.getDataList()
              } else {
                thisObj.$message.error(resJson.Msg)
              }
            })
          })
        }
      })
    },
    timeFormat (val) { // 时间格式化函数
      return moment(val).format('YYYY-MM-DD HH:mm')
    }
  }
}
</script>
